<template>
  <div class="full-box home-container">
    <div class="bg">
      <video
        class="video"
        src="/video/light-bg.mp4"
        autoplay
        muted
        loop
      />
      <video
        :class="['video-1', videoEnd ? 'hidden-video' : '']"
        src="/video/pre.webm"
        autoplay
        muted
        ref="video"
        v-if="showVideo"
      />
    </div>
    <div class="buttons d-flex m-r-mini">
      <OnlineCount style="color: #fff;margin-right: -10px;" />
      <el-dropdown
        @command="handleCommand"
      >
        <div
          class="username c-pointer d-flex ai-c f-17"
        >
          <i
            style="color: #f0ffff;"
            class="el-icon-user-solid m-r-mini"
          />
          <span style="color: #f0ffff;">{{ username }}</span>
        </div>
        <el-dropdown-menu
          class="no-padding"
          slot="dropdown"
        >
          <el-dropdown-item command="logout">
            退出登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-popover
        placement="bottom"
        trigger="hover"
      >
        <img
          class="img img-mobile"
          src="@/assets/images/hbsw/card/mobile.png"
          alt=""
          slot="reference"
        >
        <div>
          <img
            src="/mobile-qrcode.png"
            style="width: 160px;"
          >
          <div class="ta-c">
            扫码下载移动端应用
          </div>
        </div>
      </el-popover>

      <!-- <img
        class="img img-theme"
        src="@/assets/images/hbsw/card/theme.png"
        alt=""
      > -->
      <el-tooltip
        class="item"
        effect="dark"
        content="统一权限管理系统"
        placement="bottom"
      >
        <img
          class="img img-toAuth"
          src="@/assets/images/hbsw/card/toAuth.png"
          alt=""
          @click="toOtherPage('/#/ysqjc/system/user')"
        >
      </el-tooltip>
      <el-tooltip
        class="item"
        effect="dark"
        content="工作平台"
        placement="bottom"
      >
        <img
          class="img img-toOther"
          src="@/assets/images/hbsw/card/toOther.png"
          alt=""
          @click="toOtherPage('/#/ysqgzt')"
        >
      </el-tooltip>

      <el-tooltip
        class="item"
        effect="dark"
        content="页面设置"
        placement="bottom"
      >
        <img
          class="img img-setting"
          src="@/assets/images/hbsw/card/setting.png"
          alt=""
          @click="$emit('openDrawer')"
        >
      </el-tooltip>
    </div>
    <div
      :class="['site', showCard ? 'show-opacity' : '']"
    >
      <div class="wrapper horizontal demo1">
        <div class="logo">
&nbsp;
        </div>
        <ul
          :class="['container', showTime ? 'show-time' : '']"
          v-if="show"
        >
          <li
            class="cards-list"
            v-for="(item, i) in list"
            :key="i"
          >
            <div class="img">
              <h2
                @click="toOtherPage(item.web_url)"
              >
                {{ item.name }}
              </h2>
              <h3>{{ item.intro }}</h3>
              <img
                :src="item.logo"
                alt=""
              >
            </div>
          </li>
        </ul>
        <i
          class="btn-direct btn-left"
          ref="leftBtn"
        > <span class="shift-left" /> </i> <i
          class="btn-direct btn-right"
          ref="rightBtn"
        > <span class="shift-right" /> </i>
      </div>
    </div>
  </div>
</template>

<script>
import '../../lib/empile.js'
import { initCard } from '../../animate/card'
import { mapState, mapActions } from 'vuex'
import { debounce, throttle } from 'throttle-debounce'
import OnlineCount from '@/components/online-count'

export default {
  name: 'Card',
  components: {
    OnlineCount
  },
  data () {
    return {
      show: false,
      showCard: false,
      showTime: false,
      videoEnd: false,
      showVideo: true,
      list: []
    }
  },
  computed: {
    ...mapState('user', ['username'])
  },
  created () {
    this.debounceRunAnimate = debounce(50, this.runAnimate)
    this.debounceHandleMouseWheel = throttle(200, this.handleMouseWheel)
  },
  mounted () {
    this.initEvent()
    setTimeout(() => {
      this.showCard = true
      this.fetchList()
      // setTimeout(() => {
      //   this.showTime = true
      // }, 1000)
    }, 1000)
    setTimeout(() => {
      this.showTime = true
    }, 3000)
  },
  beforeDestroy () {
    this.instance.autoplay.stop()
    document.removeEventListener('mousewheel', this.handleMouseWheel)
  },
  methods: {
    ...mapActions('user', ['logout']),
    async fetchList () {
      this.show = false
      const data = await this.$request.post('/ysjc/zhzs/getuserclient', { appId: 'YSJC', bzCode: 'YSJC', IS_VALID: '1' })
      this.list = data
      this.remoteList = data
      this.$nextTick(() => {
        this.show = true
        setTimeout(() => {
          this.instance = initCard(this.list.length)
          this.startMouseWheelListener()
        }, 100)
      })
    },
    initEvent () {
      const video = this.$refs.video
      video.addEventListener('ended', () => {
        this.videoEnd = true
        setTimeout(() => {
          this.showVideo = false
        }, 2500)
      }, { once: true })
    },
    async toOtherPage (url) {
      const data = await this.$request.get('/test')
      if (data) {
        window.open(url)
      }
    },
    updateList (list) {
      this.show = false
      this.list = list
      this.$nextTick(() => {
        this.show = true
        this.$nextTick(() => {
          this.instance = initCard(this.list.length)
          this.startMouseWheelListener()
        })
      })
    },
    restoreList () {
      if (!this.remoteList) return
      this.show = false
      this.list = [...this.remoteList]
      this.$nextTick(() => {
        this.show = true
        this.$nextTick(() => {
          this.instance = initCard(this.list.length)
          this.startMouseWheelListener()
        })
      })
    },
    handleCommand (c) {
      if (c === 'logout') {
        this.logout()
      }
    },
    startMouseWheelListener () {
      document.removeEventListener('mousewheel', this.debounceHandleMouseWheel)
      document.addEventListener('mousewheel', this.debounceHandleMouseWheel)
    },
    handleMouseWheel ({ deltaY }) {
      this.instance.autoplay.stop()
      if (deltaY > 0) {
        this.instance.slideToNext()
      } else if (deltaY < 0) {
        this.instance.slideToPrev()
      }
      this.debounceRunAnimate()
    },
    runAnimate () {
      this.instance.autoplay.run()
    }
  }
}
</script>
<style lang="scss" scoped>
ul.container,
li.cards-list,
h2,
h3 {
  padding: 0;
  margin: 0;
}

ul,
ol {
  list-style: none;
}

.btn-direct {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 4rem;
  height: 4rem;
  transform: translateY(-50%);
  cursor: pointer;
  transition: 0.2s;
  margin-top: 20px;

  &.btn-left {
    left: 6rem;
  }

  &.btn-right {
    right: 6rem;
  }

  > span {
    position: absolute;
    left: calc(50% - 0.6rem);
    top: calc(50% - 0.6rem);
    width: 1.2rem;
    height: 1.2rem;
    // border-top: 0.2rem solid #3b6cf7;
    // border-left: 0.2rem solid #3b6cf7;
    border-top: 0.2rem solid #fff;
    border-left: 0.2rem solid #fff;
    opacity: 0.6;

    &:hover {
      opacity: 1;
    }
  }
}

.home-container {
  transition: all 0.8s;

  .buttons {
    position: absolute;
    right: 15px;
    top: 24px;
    z-index: 9;
    gap: 24px;

    .img {
      cursor: pointer;
    }

    .img-mobile {
      width: 12px;
      height: 19px;

      &:hover {
        content: url("~@/assets/images/hbsw/card/mobile-hover.png");
      }
    }

    .img-theme {
      width: 20px;
      height: 19px;

      &:hover {
        content: url("~@/assets/images/hbsw/card/theme-hover.png");
      }
    }

    .img-toAuth {
      width: 16px;
      height: 20px;

      &:hover {
        content: url("~@/assets/images/hbsw/card/toAuth-hover.png");
      }
    }

    .img-toOther {
      width: 21px;
      height: 19px;

      &:hover {
        content: url("~@/assets/images/hbsw/card/toOther-hover.png");
      }
    }

    .img-setting {
      width: 20px;
      height: 19px;

      &:hover {
        content: url("~@/assets/images/hbsw/card/setting-hover.png");
      }
    }
  }

  .bg {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;

    .video {
      position: absolute;
      z-index: 8;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      mix-blend-mode: screen;
      object-fit: fill;
    }

    .video-1 {
      position: absolute;
      z-index: 8;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: fill;
      transition: opacity 2s;
      opacity: 1;
    }

    .video-1.hidden-video {
      opacity: 0;
    }
  }

  .site {
    overflow: hidden;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 3s;

    .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      height: 100%;
      background: url("~@/assets/images/hbsw/card/cbj.png") no-repeat center top;
      background-size: 100% 100%;

      .logo {
        position: absolute;
        left: 0;
        top: 50%;
        z-index: 8;
        padding: 0;
        width: 100%;
        margin-top: -380px;
        height: 118px;
        background: url("~@/assets/images/hbsw/card/logo0.png") no-repeat center top;
      }

      .container {
        position: relative;
        margin: 0 auto;

        .cards-list {
          position: absolute;
          left: 60px;
          bottom: 0;
          border-radius: 0.3125rem;
          transition: 1000ms;
        }

        &.show-time {
          .cards-list {
            transition: 500ms;
          }
        }
      }

      &.horizontal {
        > .container {
          width: 21.6rem;
          height: 27rem;
          position: absolute;
          top: 57%;
          margin-top: -19rem;

          > li.cards-list .img {
            width: 100%;
            background: linear-gradient(180deg, #58f9f9, #0cd1fa);
            box-shadow: 0 -4px 20px #0124956b;
            border: 1px solid #024dcc;
            border-radius: 6px;
          }

          > li.cards-list .img > img {
            display: block;
            width: 100%;

            /* height: 100%; */
            object-fit: cover;
            -webkit-user-drag: none;
            user-select: none;
          }

          > li.cards-list:hover .img img {
            border: 1px solid #fff;
          }

          > .cards-list {
            width: 224px;

            > .img h2 {
              color: #e8fcfc;
              position: absolute;
              top: 80px;
              left: 30%;
              text-align: center;
              width: 40%;
              font-size: 26px;
              font-weight: normal;
              z-index: 12;
              line-height: 40px;
              height: auto;
              padding: 0 12px;
              display: flex;
              align-items: center;
              // justify-content: center;
              transition: text-shadow 0.5s;
              writing-mode: vertical-lr;
              letter-spacing: 4px;
            }

            &:hover .img {
              > h2 {
                color: #fff;
              }

              // > h3 {
              //   display: block;
              //   color: #e8fcfc;
              //   font-weight: 400;
              // }
            }

            > .img h2:hover {
              cursor: pointer;
              text-shadow: #022188 3px 1px 2px;
            }

            > .img h3 {
              display: none;
              position: absolute;
              bottom: 20px;
              left: 0;
              width: 100%;
              padding: 0 20px;
              font-size: 18px;
              color: #e8fcfc;
              z-index: 11;
              text-align: center;
              text-indent: 0;
              font-weight: 400;
            }

            > .img {
              position: relative;
              z-index: 1;
              // cursor: pointer;

              > img {
                box-shadow: -3px -2px 17px rgba(2, 41, 160, 0.63);
                border-radius: 6px;
                border: 1px solid #fff;
                position: relative;
                z-index: 2;
              }

              > span {
                width: 100%;
                display: block;
                height: 100%;

                &.img1 {
                  background: url("~@/assets/images/hbsw/card/p1.jpg") no-repeat center top;
                  width: 80%;
                  height: 80%;
                }
              }
            }

            &.center-card {
              .img {
                border: 1px solid #03f7f7;
                background: linear-gradient(180deg, #04efef, #03d7b0);

                > h3 {
                  display: block;
                  bottom: -190px;
                  left: -130%;
                  width: 360%;
                  padding: 0;
                  font-size: 34px;
                  font-weight: 600;
                  color: #fff;
                  text-shadow: #0131cf 1px 1px 2px;
                }

                > h2 {
                  text-shadow: #0131cf 1px 2px 1px;
                  color: #fff;
                  top: 0;
                  height: 100%;
                  // display: block;
                  // padding-top: 80px;
                  width: 100%;
                  left: 0;
                  padding-top: 80px;
                  transition: text-shadow 0.5s;

                  &:hover {
                    text-shadow: #022188 1px 2px 1px;
                  }
                }

                > img {
                  border: 1px solid #03f7f7;
                }
              }
            }
          }
        }

        .shift-left {
          transform: translateX(25%) rotate(-45deg);
        }

        .shift-right {
          transform: translateX(-25%) rotate(135deg);
        }
      }
    }
  }

  .site.show-opacity {
    opacity: 1;
  }
}

li.cards-list.left-card .img img { -webkit-box-reflect: below 6px url("~@/assets/images/hbsw/card/mengbg.png") !important; }

li.cards-list.right-card .img img { -webkit-box-reflect: below 6px url("~@/assets/images/hbsw/card/mengbg-r.png") !important; }
li.cards-list.center-card .img img { -webkit-box-reflect: below 6px -webkit-linear-gradient(transparent, transparent 60%, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 1)); }

</style>
